import React, { useState } from 'react';
import '../static/main.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'antd/dist/antd.css';
import { Tabs, Select, AutoComplete } from 'antd';
import Graph from './Graph.js';
import $ from 'jquery'
import go from '../utils/global';

const { TabPane } = Tabs;
const { Option } = Select;

// 自动完成
const mockVal = (str, repeat = 1) => ({
  value: str.repeat(repeat),
});
const Complete = () => {
  const [options, setOptions] = useState([]);

  const onSearch = (searchText) => {
    setOptions(
      !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)],
      // !searchText ? [] : [{value:1111}],
    );
  };

  const onSelect = (data) => {
    console.log('onSelect', data);
  };

  return (
    <>
      <AutoComplete
        options={options}
        style={{
          width: 150,
        }}
        onSelect={onSelect}
        onSearch={onSearch}
        placeholder="输入节点名称"
      />
    </>
  );
};

//解析结果
class Parser extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      name:'解析结果'
    }
  }

  changeKnowledgeTab = ()=>{
    console.log(11)
  }

  //关系改变
  handleRelationChange = (value)=>{
    console.log(`selected ${value}`);
  }

  //切换tag(通过子组件控制父组件数据实现)
  changeTag = (ckey) => {
    this.props.changeCurParserData(ckey, this.props.parserData[ckey])
  }
  
  render () {
    let tags = []
    let parserData = this.props.parserData
    let curParserData = this.props.curParserData
    console.log(curParserData)

    if($.isEmptyObject(parserData)){
      return null
    }

    if($.isEmptyObject(curParserData.value)){
      return null
    }
    //区别
    if($.isEmptyObject(curParserData.value.word_slot)){
      return null
    }
    let cdata = curParserData.value

    //处理tag显示
    for (let key in parserData) {
      let tagName = parserData[key].text
      // console.log('key',key)
      // console.log('curkey',curParserData.key)
      // console.log('type:',typeof curParserData.key)
      let ison = (key+'') === (curParserData.key+'') ? ' on' : ''
      tags.push(<span className={"tag"+ison} key={go.uid()} onClick={()=>{this.changeTag(key)}}><b>{tagName}</b><em>×</em></span>)
    }

    return (
      <div id="col-m" className="parser-cnt">
        <div className="tag-list mb20">
          {tags}
        </div>
        <div className="parser">
          <div className="line-title mb30 mt0"><span>解析结果</span></div>
          
          {/* 意图 */}
          <div className="parser-box mb40">
            <div className="sub-title"><span>意图</span></div>
            <div className="tab-list">
              <span className="tab on">{cdata.intent}</span>
            </div>

            <div className="deal">
              <span className="sbtn mr15">提交</span>
              <span className="sbtn warning">反馈错误</span>
            </div>
          </div>

          {/* 词槽 */}
          <div className="parser-box mb40">
            <div className="sub-title"><span>词槽</span></div>
            <div className="tab-list radis-border">
              <div className="tab-inner p15">
                <span className="tab on">实体</span>
                <span className="tab">属性</span>
                <span className="tab">时间</span>
                <span className="tab">值</span>
              </div>
              <div className="tab-cnt">
              公司聚焦城市圈带的发展战略，截至2016年底，万科已经进入中国大陆65个城市，分布在以珠三角为核心的南方区域
              </div>
            </div>

            <div className="deal">
              <span className="sbtn mr15">提交</span>
              <span className="sbtn warning">反馈错误</span>
            </div>
          </div>

          {/* 知识推断 */}
          <div className="parser-box mb40">
            <div className="sub-title"><span>知识推断</span></div>
            <Tabs defaultActiveKey="1" onChange={()=>this.changeKnowledgeTab()}>
              <TabPane tab="万科" key="1"></TabPane>
              <TabPane tab="营收" key="2"></TabPane>
              <TabPane tab="可选标签" key="3"></TabPane>
            </Tabs>

            <div className="tab-list radis-border mt0">
              <div className="tab-inner p15">
                <div className="inner-title mb15">
                  <div className="opt mr30"><em>实体</em>：万科</div>
                  <div className="opt mr30">
                    <em className="mr10">关系</em>
                    <Select defaultValue="1" style={{ width: 100 }} onChange={()=>this.handleRelationChange}>
                      <Option value="1">等同</Option>
                      <Option value="2">无</Option>
                      <Option value="3">指代</Option>
                    </Select>
                  </div>
                  <div className="opt mr30"><em>实体</em>：万科地产</div>
                  <div className="opt mr30">
                    <em className="mr10">添加节点</em>
                    <Complete />
                  </div>

                </div>
              </div>

              <div className="deal pl15">
                <span className="sbtn mr15">提交</span>
                <span className="sbtn warning">反馈错误</span>
              </div>

              <Graph />
            </div>

          </div>


        </div>
        {/* parse end */}
      </div>
    );
  }
}

export default Parser